<template>
	<view class="content">
		<SideEdge :Dataindex='1'></SideEdge>
		<view class="right">
			<search></search>
			<view class="title">
				<text>我的日程</text>
				<view class="backdrop"></view>
			</view>
			<view class="calendar">
				<view class="Topline">
					<image @click="onprevious()" src="https://img.wilmer.com.cn/admin/2024/4-29/%E5%90%91%E5%B7%A6.png"
						mode=""></image>
					<text>{{month}}月, {{year}}</text>
					<image @click="onnext()" src="https://img.wilmer.com.cn/admin/2024/4-29/%E5%90%91%E5%8F%B3.png"
						mode=""></image>
				</view>
				<view class="contentBox">
					<view class="item" v-for="(item,index) in list" :key="index" @tap.stop="onclick(item)">
						<view class="Top">
							<text>周 {{item.week}}</text>
							<text>{{item.day}}</text>
						</view>
						<!-- 任务 -->
						<view class="task">
							<view class="taskItem"
								:class="{firstItem: nav.start_day == item.day,lastItem: nav.end_day == item.day,special:nav.start_day <= item.day && nav.end_day >= item.day}"
								v-for="nav in item.task" :key="nav.id" @click.stop="ontask(nav,item)">
								<text>{{nav.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 日期任务 -->
	<up-popup :show="show" bgColor='transparent' mode='center'>
		<view class="datatask">
			<image src="https://img.wilmer.com.cn/admin/2024/4-30/%E7%BC%96%E7%BB%84%2019%E5%A4%87%E4%BB%BD%402x.png"
				mode=""></image>
			<view>{{year}}.{{month}}.{{taskList.day}}</view>
		</view>
		<view class="dataBox">
			<view class="dataItem" v-for="(item,index) in taskList.task" :key="index"
				v-show="item.start_day <= taskList.day && item.end_day >= taskList.day">
				<view style="display: flex;">
					<view class="Verticalline"></view>
					<view class="middle">
						<view class="one">{{item.title}}</view>
						<view class="two">
							<!-- <view class="weekdata">
								<text>周三</text>
								<text>本周四</text>
							</view> -->
							<view class="daydata">
								<text>{{month}}.{{item.start_day}}</text>
								<text> —— </text>
								<text>{{month}}.{{item.end_day}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="rightBtn" @click="ontask(item,taskList)" v-if="item.status == 0">完 成</view>
				<view class="rightBtn" style="background: #B2B1AF;" v-if="item.status == 1">已完成</view>
				<view class="rightBtn" style="background: #B2B1AF;" v-if="item.status == 2">已确认</view>
			</view>
		</view>
		<image class="shutImg" src="https://img.wilmer.com.cn/admin/2024/6-12/%E5%85%B3%E9%97%AD.png" mode=""
			@click="close"></image>
	</up-popup>
	<!-- 日期任务 -- 完成 -->
	<up-popup :show="complete" bgColor='transparent' mode='center'>
		<view class="datatask">
			<image src="https://img.wilmer.com.cn/admin/2024/4-30/%E7%BC%96%E7%BB%84%2019%E5%A4%87%E4%BB%BD%402x.png"
				mode=""></image>
			<view v-if="completeObj.status == 0">
				{{completeObj.start_day}}.{{("0" +  month).substring(-2)}}.{{year}}
			</view>
			<view v-else>{{completeObj.start_time}}</view>
		</view>
		<view class="dataBox SubmitBox">
			<view class="dataline">
				<view class="leftTitle">
					<image src="https://img.wilmer.com.cn/admin/2024/6-12/%E4%BB%BB%E5%8A%A1.png" mode=""></image>
					<text>任务：</text>
				</view>
				<text>{{completeObj.title}}</text>
			</view>
			<view class="dataline">
				<view class="leftTitle">
					<image src="https://img.wilmer.com.cn/admin/2024/6-12/%E6%97%B6%E9%97%B4%20%281%29.png" mode="">
					</image>
					<text>时间：</text>
				</view>
				<text v-if="completeObj.status == 0">{{("0" +  month).substring(-2)}}.{{( completeObj.start_day)}} ——
					{{("0" +  month).substring(-2)}}.{{( completeObj.end_day)}}</text>
				<text v-else>{{( completeObj.start_time)}} —— {{( completeObj.end_time)}}</text>
			</view>
			<view class="dataline" style="align-items: flex-start;">
				<view class="leftTitle">
					<image src="https://img.wilmer.com.cn/admin/2024/6-12/%E6%8B%8D%E7%85%A7.png" mode="">
					</image>
					<text>拍照：</text>
				</view>
				<view class="ImageBox" v-if="completeObj.status == 0">
					<view class="uploadImg" v-for="(item,index) in fileList1" :key="index">
						<image :src="item" mode=""></image>
						<image class="shutImg" @click="onshut(index)"
							src="https://img.wilmer.com.cn/admin/2024/6-12/304%E9%94%99%E8%AF%AF%E3%80%81%E5%85%B3%E9%97%AD%E3%80%81%E5%8F%96%E6%B6%88-%E5%9C%86%E6%A1%86%20%281%29.png"
							mode=""></image>
					</view>
					<view class="upimg" @click="onupload()">
						<image src="https://img.wilmer.com.cn/admin/2024/6-12/%E4%B8%8A%E4%BC%A0.png" mode=""></image>
					</view>
				</view>
				<view class="ImageBox" v-else>
					<view class="uploadImg">
						<image :src="completeObj.images" mode="" @click="onPreviewImage"></image>
					</view>
				</view>
			</view>
			<up-textarea v-if="completeObj.status == 0" placeholder="备注" height='200' border='none'
				v-model="desc"></up-textarea>
			<up-textarea v-else placeholder="备注" height='200' border='none' v-model="completeObj.desc"
				disabled></up-textarea>
			<view class="btnLine">
				<view class="btn" hover-class="checkActive" hover-stay-time='20' @click="onCancel()">取 消</view>
				<view v-if="completeObj.status == 0" class="btn" hover-class="checkActive" hover-stay-time='20'
					@click="onComplete()">完 成</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ScheduleList,
		uploadTask,
		taskDetail
	} from '@/common/api/schedule.js'
	import {
		getSignedUrl
	} from '@/common/api/user.js'

	// 
	import {
		ref,
		reactive
	} from "vue"
	const year = ref(new Date().getFullYear())
	const month = ref(new Date().getMonth() + 1)
	const list = ref([])

	function getList() {
		ScheduleList({
			year: year.value,
			month: month.value
		}).then(res => {

			let arr = []
			// 抽离当月全部任务
			for (let i = 0; i < res.data.length; i++) {
				let item = res.data[i]
				if (item.task.length !== 0) {
					arr.push(item.task)
				}
			}
			var newArray = arr.reduce(function(acc, val) {
				return acc.concat(val);
			}, []);
			// 重新添加任务
			let taskArr = []
			for (let i = 0; i < res.data.length; i++) {
				let content = res.data[i]
				taskArr.push({
					day: content.day,
					task: [],
					week: content.week
				})
				for (let j = 0; j < newArray.length; j++) {
					if (content.day >= newArray[j].start_day && content.day <= newArray[j].end_day) {
						// taskArr[i].task.push(newArray[j])
						taskArr[i].task = newArray
					}
				}
			}

			list.value = taskArr
		})
	}

	// 获取配置
	const key = ref('')
	const policy = ref('')
	const success_action_status = ref('')
	const host = ref('')
	const Signature = ref('')
	const OSSAccessKeyId = ref('')

	function getSigned() {
		getSignedUrl({
			route: "image"
		}).then(res => {
			key.value = res.data.key
			policy.value = res.data.policy
			success_action_status.value = res.data.success_action_status
			host.value = res.data.host
			Signature.value = res.data.Signature
			OSSAccessKeyId.value = res.data.OSSAccessKeyId
		})
	}

	function onnext() {
		if (month.value < 12) {
			month.value += 1
		} else if (month.value == 12) {
			year.value += 1
			month.value = 1
		}
		getList()
	}

	function onprevious() {
		if (month.value > 1) {
			month.value -= 1
		} else if (month.value == 1) {
			month.value = 12
			year.value -= 1
		}
		getList()
	}

	// 日期任务
	const show = ref(false);
	const taskList = ref([]);

	function onclick(item) {
		if (item.task.length > 0) {
			taskList.value = item
			show.value = true
		} else {
			uni.showToast({
				title: "暂无数据",
				icon: 'none'
			});
		}
	}

	function close() {
		show.value = false;
	}

	// 完成任务
	const fileList1 = ref([]);
	const complete = ref(false);
	const completeObj = ref({});
	const desc = ref('')

	function ontask(nav, item) {
		if (nav.start_day <= item.day && nav.end_day >= item.day) {
			if (nav.status == 0) {
				complete.value = true
				completeObj.value = nav
			} else {
				taskDetail({
					id: nav.id
				}).then(res => {
					complete.value = true
					completeObj.value = res.data
				})
			}
		} else {
			if (item.task.length > 0) {
				taskList.value = item
				show.value = true
			} else {
				uni.showToast({
					title: "暂无数据",
					icon: 'none'
				});
			}
		}
	}

	function onupload() {
		uni.chooseImage({
			count: 9,
			success: (img) => {
				let keyone = key.value + new Date().getTime() + Math.floor(Math.random() * 150) + '.png'
				uni.uploadFile({
					url: host.value, //输入你的bucketname.endpoint
					filePath: img.tempFilePaths[0],
					name: 'file',
					formData: {
						key: keyone,
						policy: policy.value, // 输入你获取的的policy
						OSSAccessKeyId: OSSAccessKeyId.value, // 输入你的AccessKeyId
						success_action_status: success_action_status.value, // 让服务端返回200,不然，默认会返回204
						signature: Signature.value, // 输入你获取的的signature
					},
					success: (res) => {
						if (res.statusCode == 200) {
							fileList1.value.push(host.value + '/' + keyone)
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		})
	}

	function onshut(index) {
		fileList1.value.splice(index, 1)
	}

	function onCancel() {
		fileList1.value = []
		complete.value = false
	}

	function onComplete() {
		if (desc.value == "" && fileList1.value.length == 0) {
			uni.showToast({
				title: "备注和作业拍照为必需填项",
				icon: 'none'
			});
			return false
		} else {
			let images = ''
			for (let i = 0; i < fileList1.value.length; i++) {
				images += fileList1.value[i] + ','
			}
			uploadTask({
				id: completeObj.value.id,
				images: images,
				desc: desc.value
			}).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: "上传成功",
						icon: 'none'
					});
					fileList1.value = []
					desc.value = ''
					complete.value = false
					show.value = false
					getList()
				}
			})
		}
	}

	import {
		onShow
	} from "@dcloudio/uni-app"; // 该依赖已内置不需要单独安装
	onShow(() => {
		uni.hideTabBar()
		getSigned()
		getList()
	})

	function onPreviewImage() {
		var imgArr = [];
		imgArr.push(completeObj.value.images);
		//预览图片
		uni.previewImage({
			urls: imgArr,
			current: imgArr[0]
		});
	}
</script>

<style>
	page {
		width: 100%;
		height: auto;
		background: #F7F7F7;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-textarea {
		margin: 40px 20px 0;
		width: calc(100% - 40px);
		background: #F8F8F8;
		border-radius: 18px;
	}

	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		position: relative;
	}

	.right {
		width: calc(100vw - 300px);
		height: 100vh;
		overflow: overlay;
	}

	.content .right .title {
		position: relative;
		margin-left: 20 * 0.8px;
		margin-top: -45px;

		text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32px;
			color: #040404;
			line-height: 34px;
			text-align: left;
			font-style: normal;
			position: relative;
			z-index: 999;
		}

		.backdrop {
			width: 127px;
			position: relative;
			bottom: 15px;
			height: 13px;
			background: #2283E2;
		}
	}

	.content .right .calendar {
		padding-bottom: 20px;
		background: #FFFFFF;
		box-shadow: 0px 6px 58px 0px rgba(124, 124, 124, 0.1);
		border-radius: 24px;
		margin: 0 16px;

		.Topline {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 30px;

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24px;
				color: #000;
				margin: 0 40px;
			}

			image {
				width: 40px;
				height: 32px;
			}
		}

		.contentBox {
			margin-top: 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			overflow: auto;

			.item {
				box-sizing: border-box;
				width: calc(100% / 7);
				min-height: 150px;
				border: 1px solid rgba(178, 177, 175, 0.3);
				padding-top: 4px;
				// margin: 0px -1px -1px 0px;

				.Top {
					margin: 0 12px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 16px;
						color: #787774;
					}

					.right {
						font-size: 20px;
						color: #787774;
					}
				}

				.task .taskItem {
					padding: 10px;
					background: #F4F9FD;
					// border-radius: 14px;
					margin-top: 4px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 16px;
					color: #0A1629;
					line-height: 16px;
					opacity: 0;

					text {
						opacity: 0;
					}
				}

				.task .special {
					opacity: 1;
				}

				.task .firstItem {
					border-radius: 14px 0 0 14px;

					text {
						opacity: 1 !important;
					}
				}

				.task .lastItem {
					border-radius: 0 14px 14px 0;
				}
			}
		}
	}

	.datatask {
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 155px;
			height: 144px;
			margin-right: 100px;
		}

		view {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 64px;
			color: #040404;
			line-height: 90px;
			text-shadow: 0px 0px 35px rgba(255, 255, 255, 0.5);
			text-stroke: 3px #FFFFFF;
			text-align: left;
			font-style: normal;
			-webkit-text-stroke: 3px #FFFFFF;
		}
	}

	.dataBox {
		width: 965px;
		height: 531px;
		overflow: overlay;
		background: #FFFFFF;
		border-radius: 24px;
		margin-top: -15px;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: space-between;
		gap: 10px;
		padding: 20px 20px 0;
		box-sizing: border-box;

		.dataItem {
			width: 451px;
			height: 143px;
			background: #F8F8F8;
			border-radius: 18px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Verticalline {
				width: 6px;
				height: 104px;
				background: #6D5DD3;
				border-radius: 2px;
				margin-left: 20px;
			}

			.middle {
				height: 104px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 16px;

				.one {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24px;
					color: #040404;
					line-height: 26px;
				}

				.two {
					display: flex;
					flex-direction: column;

					.weekdata {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 18px;
							color: #B2B1AF;
							line-height: 20px;
						}
					}

					.daydata {
						text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 24px;
							color: #787774;
							line-height: 26px;
						}
					}
				}
			}

			.rightBtn {
				width: 110px;
				height: 48px;
				background: #141414;
				border-radius: 12px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 20px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20px;
			}
		}

		.dataline {
			margin-top: 30px;
			display: flex;

			.leftTitle {
				display: flex;
				align-items: center;

				image {
					width: 21px;
					height: 21px;
				}

				text {
					width: 54px;
					display: inline-block;
					margin-left: 16px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 18px;
					color: #787774;
					line-height: 26px;
				}
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 18px;
				color: #040404;
				line-height: 26px;
			}
		}

		.ImageBox {
			gap: 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.uploadImg {
				width: 74px;
				height: 74px;
				position: relative;

				image {
					width: 74px;
					height: 74px;
				}

				.shutImg {
					position: absolute;
					top: -25px;
					right: 0;
					width: 20px;
					height: 20px;
				}
			}

			.upimg {
				width: 74px;
				height: 74px;
				background: #FFFFFF;
				border-radius: 8px;
				border: 1px dashed #787774;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 38px;
					height: 38px;
				}
			}
		}
	}

	.SubmitBox {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		height: auto;
		padding-bottom: 20px;

		.btnLine {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 110px;
				height: 48px;
				background: #141414;
				border-radius: 12px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 20px;
				color: #FFFFFF;
			}

			.btn:nth-child(1) {
				margin-right: 48px;
				background: #B2B1AF;
			}
		}
	}

	.shutImg {
		width: 60px;
		height: 60px;
		margin: 20px auto 0;
		display: block;
	}
</style>